<template>
	<view class="ikz-ordertop">

		<view class="ikz-order-tabs">
			<view class="ikz-order-tab" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
				跑腿订单
			</view>
			<view class="ikz-order-tab" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
				自取订单
			</view>
		</view>

		<div v-if="activeTab == 0">
			<view class="ikz-ordertop-top">
				<view class="ikz-order-top-title">
					我的订单
				</view>
				<view class="ikz-order-top-more" @click="myOrder1('')">
					查看全部
				</view>
			</view>
			<view class="ikz-ordertop-list">
				<view class="ikz-ordertop-item" @click="myOrder1(0)">
					<image class="ikz-ordertop-img" src="/static/ordertop/order.png"></image>
					<view class="ikz-ordertop-item-title">
						待付款
					</view>
					<!-- <view class="ikz-ordertop-item-num" v-if="orderNumber.not_pay_count">
					{{orderNumber.not_pay_count}}
				</view> -->
				</view>
				<view class="ikz-ordertop-item" @click="myOrder1(1)">
					<image class="ikz-ordertop-img" src="/static/ordertop/order1.png"></image>
					<view class="ikz-ordertop-item-title">
						待接单
					</view>
					<!-- <view class="ikz-ordertop-item-num" v-if="orderNumber.not_receive_count">
					{{orderNumber.not_receive_count}}
				</view> -->
				</view>
				<view class="ikz-ordertop-item" @click="myOrder1(2)">
					<image class="ikz-ordertop-img" src="/static/ordertop/order1.png"></image>
					<view class="ikz-ordertop-item-title">
						已抢单
					</view>
					<!-- <view class="ikz-ordertop-item-num" v-if="orderNumber.not_receive_count">
					{{orderNumber.not_receive_count}}
				</view> -->
				</view>
				<view class="ikz-ordertop-item" @click="myOrder1(4)">
					<image class="ikz-ordertop-img" src="/static/ordertop/order2.png"></image>
					<view class="ikz-ordertop-item-title">
						已取消
					</view>
				</view>
				<view class="ikz-ordertop-item" @click="myOrder1(3)">
					<image class="ikz-ordertop-img" src="/static/ordertop/over.png"></image>
					<view class="ikz-ordertop-item-title">
						已完成
					</view>
				</view>
			</view>
		</div>
		<div v-else>
			<view class="ikz-ordertop">
				<view class="ikz-ordertop-top">
					<view class="ikz-order-top-title">
						我的订单
					</view>
					<view class="ikz-order-top-more" @click="myOrder('')">
						查看全部
					</view>
				</view>
				<view class="ikz-ordertop-list">
					<view class="ikz-ordertop-item" @click="myOrder(0)">
						<image class="ikz-ordertop-img" src="/static/supermarket/user/icon_order_pay.png"></image>
						<view class="ikz-ordertop-item-title">
							待付款
						</view>
						<view class="ikz-ordertop-item-num" v-if="number_info.not_pay_count">
							{{ number_info.not_pay_count }}
						</view>
					</view>
					<view class="ikz-ordertop-item" @click="myOrder(1)">
						<image class="ikz-ordertop-img" src="/static/supermarket/user/icon_order_receive.png"></image>
						<view class="ikz-ordertop-item-title">
							待接单
						</view>
						<view class="ikz-ordertop-item-num" v-if="number_info.not_receive_count">
							{{ number_info.not_receive_count }}
						</view>
					</view>
					<view class="ikz-ordertop-item" @click="myOrder(2)">
						<image class="ikz-ordertop-img" src="/static/supermarket/user/icon_order_wait.png"></image>
						<view class="ikz-ordertop-item-title">
							待确认
						</view>
						<view class="ikz-ordertop-item-num" v-if="number_info.not_confirm_count">
							{{ number_info.not_confirm_count }}
						</view>
					</view>
					<view class="ikz-ordertop-item" @click="myOrder(3)">
						<image class="ikz-ordertop-img" src="/static/supermarket/user/icon_order_complete.png"></image>
						<view class="ikz-ordertop-item-title">
							已完成
						</view>
					</view>
				</view>
			</view>
		</div>
	</view>
</template>

<script>
export default {
	name: 'ordertop',
	props: {
		showData: {
			type: Object,
		},
		orderNumber: {
			type: Object,
		}
	},
	data() {
		return {
			number_info: {},
			activeTab: 0
		};
	},
	watch: {
		orderNumber: {
			handler(newName, oldName) {
				console.log(newName)
			},
			immediate: true,
			deep: true
		},
	},
	mounted() {
		this.orderNumber();
	},
	methods: {
		// 获取订单菜单数量角标
		orderNumber() {
			var path = '/xyb/supermarket/order/center_order_count';
			var data = {}
			ikz.post(path, data, res => {
				if (res.data.code) {
					this.number_info = res.data.data;
					this.$forceUpdate();
				} else {
					uni.showModal({
						title: '提示',
						content: res.data.msg,
						showCancel: false,
						success: function (res) { }
					});
				}
			});
		},
		switchTab(index) {
			this.activeTab = index;
		},
		// 跳转详情
		myOrder(e) {
			if (!uni.getStorageSync("user_info")) {
				uni.navigateTo({
					url: "/pages/login/index"
				})
				return
			}
			uni.navigateTo({
				url: "/pages/Component/supermarket/Program/order/index?status=" + e
			})
		},
		myOrder1(e) {
			if (!uni.getStorageSync("user_info")) {
				uni.navigateTo({
					url: "/pages/login/index"
				})
			}
			uni.navigateTo({
				url: '/pages/Component/Module/Campus/Program/Order/myorder/index?status=' + e
			})
		}
	}
};
</script>

<style scoped>
.ikz-order-tabs {
	display: flex;
	padding: 20rpx 40rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.ikz-order-tab {
	flex: 1;
	text-align: center;
	padding: 10rpx 0;
	color: #666;
}

.ikz-order-tab.active {
	color: #FBAB7E;
	font-weight: bold;
	position: relative;
}

.ikz-order-tab.active:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 4rpx;
	background: #FBAB7E;
	border-radius: 2rpx;
}


.ikz-ordertop {
	box-sizing: border-box;
	width: 95%;
	background: #fff;
	margin: 0 auto;
	border-radius: 15rpx;
	padding: 0 0 20rpx 0;
}

.ikz-ordertop-top {
	box-sizing: border-box;
	padding: 20rpx 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 60rpx;
}

.ikz-order-top-title {
	font-weight: 800;
	font-size: 28rpx;
}

.ikz-order-top-more {
	font-size: 26rpx;
	color: #888;
}

.ikz-ordertop-list {
	width: 95%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ikz-ordertop-item {
	position: relative;
	wdith: 25%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.ikz-ordertop-img {
	width: 70rpx;
	height: 70rpx;
}

.ikz-ordertop-item-title {
	width: 100%;
	text-align: center;
	font-size: 28rpx;
	line-height: 80rpx;
}

.ikz-ordertop-item-num {
	position: absolute;
	right: 30rpx;
	top: -10rpx;
	width: 40rpx;
	height: 40rpx;
	text-align: center;
	line-height: 40rpx;
	color: #fff;
	background: #FBAB7E;
	border-radius: 50%;
	font-size: 23rpx;
}
</style>
